<script setup lang="ts">
import {reactive, ref} from "vue";
import {getLeftTopData} from "@/api";
import CountUp from "@/components/count-up";
import {ElMessage} from "element-plus"
import ItemWrap from "@/components/item-wrap";

const title = ref("");
const duration = ref(2);
const state = reactive({
  value1: 0,
  value2: 0,
  value3: 0,
  totalNum: 0,
});


const getData = () => {
  getLeftTopData().then((res) => {
    console.log("左上--设备总览", res);
    if (res.code) {
      for (let item of res.data) {
        const value = JSON.parse(item.statisticalValue);
        switch (item.type) {
          case "title":
            title.value = value.data;
            break;
          case "data":
            state.value1 = (value.data.filter(item=> item.title === "绿牌"))[0];
            state.value2 =  value.data.filter(item=> item.title === "黄牌")[0];
            state.value3 =  value.data.filter(item=> item.title === "红牌")[0];
            state.totalNum =  value.data.filter(item=> item.title === "总数")[0];
            break;
        }
      }

    } else {
      ElMessage.error(res.msg)
    }
  }).catch(err => {
    ElMessage.error(err)
  });
  ;
};
getData();
const to_alarm_page = () => {
  window.location.href = ('http://yb.hsznkj.com.cn:8180/#/recycleBinManagement/recycleBinInfo')
}
</script>

<template>
  <item-wrap :title='title'  style="height: 50px;" ></item-wrap>
  <div>
    <ul class="user_Overview flex">
      <li class="user_Overview-item">
        <div class="user_Overview_nums total bgdonghua">
          <CountUp :endVal="state.totalNum.count" :duration="duration"/>
          <p>{{state.totalNum.title}}</p>
        </div>
      </li>
      <li class="user_Overview-item"  >
        <div class="user_Overview_nums lv">
          <CountUp :endVal="state.value1.count" :duration="duration"/>
          <p>{{state.value1.title}}</p>
        </div>
      </li>
      <li class="user_Overview-item" >
        <div class="user_Overview_nums huang" >
          <CountUp :endVal="state.value2.count" :duration="duration"/>
          <p>{{state.value2.title}}</p>
        </div>
      </li>
      <li class="user_Overview-item" @click="to_alarm_page"
      >
        <div class="user_Overview_nums hong">
          <CountUp :endVal="state.value3.count" :duration="duration"/>
          <p>{{state.value3.title}}</p>
        </div>
      </li>
    </ul>
  </div>

</template>

<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}

.user_Overview {
  // 每个模块的间距
  padding: 0px 20px 10px 20px;
  height: 80%;
  background-color: #04102d90;

  li {
    flex: 1;
    font-size: 20px;
    color: #ffffff;
    font-weight: bolder;
    text-align: center;
    height: 100%;

    .user_Overview_nums {
      text-align: center;
      line-height: 80px;
      margin: 40px 10px 30px;
      background-size: cover;
      background-position: center center;
      position: relative;
      padding: 0 0 10px 0;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 1s linear infinite;
      }
      .countup-wrap{
        height: 40px;
        letter-spacing: 2px;
      }
    }

    .total {
      &::before {
        margin:0;
        width: 140px;
        height: 140px;
        background: url("@/assets/img/left_top_lan.png") no-repeat center center / cover;
      }
      .countup-wrap{
        width: 140px;
        height: 50px;
        line-height: 120px;
      }
    }

    .lv {
        background: url("@/assets/img/left_top_lv.png") no-repeat center center/ cover;
    }

    .huang {
        background: url("@/assets/img/left_top_yellow.png") no-repeat center center / cover;

    }

    .hong {
        background: url("@/assets/img/left_top_red.png") no-repeat center center/ cover;
    }
  }
}
</style>
